<template>
	<div class="ele-body">
		<a-card :bordered="false" title="首饰采购信息">
			<table cellpadding="0" cellspacing="0" class="recepit_table2">
				<tbody>
					<tr>
						<td class="tit">位置</td>
						<td>{{ receipts_detail.type_location || '' }}</td>
						<td class="tit">库存地点</td>
						<td>{{ receipts_detail.addr || '' }}</td>
						<td class="tit">地点描述</td>
						<td>{{ receipts_detail.location_desc || '' }}</td>
						<td class="tit">采购时间</td>
						<td>{{ receipts_detail.purchase_time || '' }}</td>
					</tr>
				</tbody>
			</table>
			<div class="margin-y-30">
				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="24" :sm="24" :xs="24">
							<goodsDetailTable :goods="receipts_detail" :table1="table1" :table2="table2" :table3="table3"/>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>

		<!-- 模板导入弹窗 -->
		<ele-modal :width="550" :visible="visible" :confirm-loading="loading" title="导入" :body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
			<a-form :wrapper-col="{ md: { span: 24 }, sm: { span: 24 }, xs: { span: 24 } }">
				<a-row :gutter="24">
					<a-col :md="24" :sm="24" :xs="24">
						<a-form-item>
							<div style="margin: 30px 30px">
								<div class="flex align-center justify-between">
									<div>请选择导入的文件</div>
									<a>下载模板文件</a>
								</div>
								<div class="margin-top-15">
									<a-upload-dragger
										name="attachment"
										:data="{ type: 'files' }"
										v-model:file-list="fileList"
										:action="uploadUrl"
										:limit="1"
										list-type="text"
										:show-upload-list="true"
										@change="uploadHandler"
										@drop="handleDrop"
									>
										<div>
											<loading-outlined v-if="loading" />
											<img class="daoru_img" src="@/assets/daoru.png" v-else />
											<div class="ele-text-primary">点击上传</div>
										</div>
									</a-upload-dragger>
								</div>
							</div>
							<div>
								<div class="fs-14 color-999">1、仅支持.xlsx和.csv的Excel文件，推荐.csv文件，导入速度更快。</div>
								<div class="fs-14 color-999">2、3000行以上的数据仅支持.csv文件，请在Excel另存为CSV文件后再导入。</div>
								<div class="fs-14 color-999">3、仅支持Excel文件中第一个表格的数据导入。</div>
								<div class="fs-14 color-999">4、根据表格第一行标题自动匹配数据，第一行作为标题不导入数据。</div>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</ele-modal>
		<!-- 选择货品弹窗 -->
		<select-goods v-if="showCheck" v-model:visible="showCheck" @load="getDetail" @done="done" />
		<!-- 货品详情弹窗 -->
		<!-- <goods-detail v-if="showDetail" v-model:visible="showDetail" :goodsCode="goodsCode" /> -->
	</div>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { actionFn } from '@/utils/action.js';
import goodsTable from '@/components/jewelry/goodsTable.vue';
import selectGoods from '@/components/jewelry/select-goods.vue';
import goodsDetail from './components/goods-detail.vue';
import { uploadUrl } from '@/config/setting';
import { goods_info } from '@/api/jewelry/goods_info';
import goodsDetailTable from '@/components/jewelry/goodsDetailTable.vue';

const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
//console.log(query);
const loading = ref(false);
const showCheck = ref(false);
const showDetail = ref(false);
const goodsCode = ref(null);
const receipts_detail = ref({});
const goods = ref({});
const visible = ref(false);
//货品list
const tableData = ref([]);

const fileList = ref([
	/* {
	  uid: '1',
	  name: 'xxx.png',
	  status: 'done',
	  response: 'Server Error 500',
	  url: 'http://www.baidu.com/xxx.png'
	} */
]);
/* 完全自己控制选择文件后的处理 */
const uploadHandler = info => {
	if (info && info.file && info.file.response) {
		const data = info.file.response.data;
		/* imageUrl.value = data.path;
      form.thumb = data.id; */
	}
};
const handleDrop = e => {
	console.log('上传', e);
};
const action = row => {
	//console.log('row', row);
	if (row.action == 'look') {
		lookGoods(row);
	} else if (row.action == 'del') {
		delGoods(row);
	}
};
const lookGoods = row => {
	showDetail.value = true;
	goodsCode.value = row.code;
};
const delGoods = row => {
	Modal.confirm({
		title: '提示',
		content: '确认删除？',
		okText: '确认',
		cancelText: '取消',
		onOk: () => {
			del_goods({ code: query.code, goods_code: row.code })
				.then(res => {
					message.success(res.msg);
					getDetail();
				})
				.catch(e => {
					message.error(e);
				});
		}
	});
};

//主石信息
const table1 = reactive({
	loading: false,
	tableData: [
		{
			type: 1,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//副石信息
const table2 = reactive({
	loading: false,
	tableData: [
		{
			type: 2,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//配件信息
const table3 = reactive({
	loading: false,
	tableData: [{
		fitting_name:'',
		fitting_num:'',
		fitting_weight:'',
		fitting_num_price:'',
		fitting_weight_price:'',
		fitting_cost:'',
	}]
});
onMounted(() => {
	getDetail();
});
const getDetail = () => {
	goods_info({ code: query.code }).then(res => {
		/* goods.value = res.goods[0];
		tableData.value = res.goods; */
		console.log('res', res);
		receipts_detail.value = res;
		table1.tableData = res.master_gem;
		table2.tableData = res.slave_gem;
		/* table3.tableData[0] = {
			fitting_name:res.fitting_name,
			fitting_num:res.fitting_num,
			fitting_weight:res.fitting_weight,
			fitting_num_price:res.fitting_num_price,
			fitting_weight_price:res.fitting_weight_price,
			fitting_cost:res.fitting_cost,
		}; */
		let array = [{
			fitting_name:res.fitting_name,
			fitting_num:res.fitting_num,
			fitting_weight:res.fitting_weight,
			fitting_num_price:res.fitting_num_price,
			fitting_weight_price:res.fitting_weight_price,
			fitting_cost:res.fitting_cost
		}]
		table3.tableData = array;
		/* table3.tableData[0].fitting_name = res.fitting_name;
		table3.tableData[0].fitting_num = res.fitting_num;
		table3.tableData[0].fitting_weight = res.fitting_weight;
		table3.tableData[0].fitting_num_price = res.fitting_num_price;
		table3.tableData[0].fitting_weight_price = res.fitting_weight_price;
		table3.tableData[0].fitting_cost = res.fitting_cost; */
	});
};
const toSelect = () => {
	showCheck.value = true;
};

const save = () => {};
const done = form => {
	let data = {
		url: '/jewelry/receipts_allocation/add_goods'
	};
	actionFn(data, form, reloadTable);
};
const reloadTable = () => {
	showCheck.value = false;
	getDetail();
};
/* 更新visible */
const updateVisible = value => {
	visible.value = value;
};
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 440px !important;
	height: 180px !important;
	background-color: #fafafa;
	border: 1px dashed #d9d9d9;
	.ant-upload {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
}
</style>
